import React, { useState, useEffect } from 'react';
import { Table, Button, Modal, Form, Tabs } from 'antd'
import trans from '@/utils/translate';
import format from '@/utils/format';
import { getStatus } from '../../status';
import { model } from './SelectModel';
import { edgeRequest } from '@/utils/request';
import ATable, { ATableColumn, SearchToolBarProps } from '@apulis/table';
import { nodeAPI } from '../service';
interface node {
  nodeName: string,
  nodeId: string;
  nodeType: string,
  status: string,
  updateAt: string,
}
interface device {
  type: string;
  series: string;
  deviceNum: number;
  cpu: number;
  memory: number;
}
interface Props {
  nodes: node[];
  setNodes: any;
  models: model[];
  series: device[];
}
const { Item } = Form;
const { TabPane } = Tabs;

const SelectNode: React.FC<Props> = (props) => {
  const {
    nodes,
    setNodes,
    models,
    series,
  } = props;
  const [modal, setModal] = useState(false); // 控制节点选择弹窗
  const columnsNode: ATableColumn<node>[] = [
    {
      title: trans('nodeManagement.edgeNode.nodeName'),
      dataIndex: 'nodeName',
    },
    {
      title: trans('nodeManagement.edgeNode.nodeType'),
      dataIndex: 'nodeType',
    },
    {
      title: trans('nodeManagement.edgeNode.status'),
      dataIndex: 'status',
      render: text => getStatus(text)
    },
    {
      title: trans('nodeManagement.edgeNode.updatedAt'),
      dataIndex: 'updatedAt',
      render: text => format(text)
    },
  ];
  const columnsNodeSelect = [...columnsNode, {
    title: trans('nodeManagement.edgeNode.operation'),
    render: (text: string, record: node, index: number) => (
      <Button onClick={() => deleteNode(index)}>{trans('common.delete')}</Button>
    )
  }];

  const deleteNode = (index: number) => {
    const nodesTemp = [...nodes];
    nodesTemp.splice(index, 1);
    setNodes(nodesTemp);
  }
  return (
    // <Item label={trans('deployOnline.edgeInference.add.selectEdgeNode')} required labelAlign='left'>
    <Item label={trans('deployOnline.edgeInference.add.selectEdgeNode')} required labelAlign='left'>
      {
        (nodes.length > 0 && !modal) ?
        <Table
          dataSource={nodes}
          columns={columnsNodeSelect}
          rowKey='nodeName'
          rowSelection={{
            type:'checkbox',
          }}
          pagination={false}
        ></Table> :
        <section>
          {/* <Button onClick={() => setModalNode(true)}>{trans('common.select')}</Button> */}
          <Modal
          visible={modal}
          onOk={() => setModal(false)}
          onCancel={() => setModal(false)}
          title="选择节点"
          width='800px'>
            <Tabs defaultActiveKey='node'>
              <TabPane tab={trans('deployOnline.edgeInference.add.selectNode')} key='node'>
                <ATable
                  request={edgeRequest}
                  dataSourceAPIPath={`${nodeAPI}?status=online&series=${series.join(',')}`}
                  columns={columnsNode}
                  rowKey='nodeName'
                  reloadIcon={false}
                  rowSelection={{
                    type:'checkbox',
                    onChange: (selectedRowKeys, selectedRows: node[]) => {
                      setNodes(selectedRows);
                    },
                  }}
                ></ATable>
              </TabPane>
              {/* <TabPane tab={trans('deployOnline.edgeInference.add.selectNodeGroup')} key='group'>
                developing
              </TabPane> */}
            </Tabs>
          </Modal>
        </section>
      }
      <Button disabled={!models.length} onClick={() => setModal(true)}>{trans('common.select')}</Button>
    </Item>
  )
}

export default SelectNode;
